<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css" />
    <script src="./jsonp.js"></script>
  </head>

  <body>
    <div class="wrap">
      <div class="headerContainer">
        <img
          src="https://s10.mogucdn.com/mlcdn/c45406/190102_088f4i166l4gkl08k297h5kk8690i_260x200.png"
        />
        <div class="catalog">目录</div>
        <div class="searchContainer">
          <input type="text" class="searchInput" />
          <button class="btn"></button>
        </div>
        <div class="iconShow">
          <span class="iconMessage"></span>
          消息
        </div>
        <div class="iconShow">
          <span class="iconCollect"></span>
          收藏
        </div>
      </div>
      <h3 class="sub_title">全部食品</h3>
      <div class="nav_box">
        <div class="txt">
          <span>￥</span>
        </div>
        <span class="divid">-</span>
        <div class="txt">
          <span>￥</span>
        </div>
        <a class="confirm_btn" href="javascript:;">确定</a>
      </div>
      <div class="itemContainer">
        <!-- 商品呈现 -->
        <div class="item">
          <img
            src="https://s11.mogucdn.com/mlcdn/c45406/180830_0ggfhcfd757g3jg8k8fjaclc3h123_640x960.jpg_440x587.v1cAC.40.webp"
          />
          <div class="bottom-describe">
            <p class="describe">
              海底捞火锅1盒懒人自煮自热方便速食牛油麻辣即食小火锅麻辣火锅
            </p>
            <div class="priceContainer">
              <b>¥26.8</b>
              <span class="oldPrice">￥53.6</span>
              <span class="mystar">
                <img
                  src="https://s18.mogucdn.com/p2/160908/upload_27g4f1ch6akie83hacb676j622b9l_32x30.png"
                  alt=""
                />
                2585
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    let page = 1;
    function getData(page = 1) {
      ajax({
        url: 'https://list.mogu.com/search',
        data: {
          _version: 8193,
          ratio: '3%3A4',
          cKey: 15,
          page: page,
          sort: 'pop',
          ad: 0,
          fcid: 52014,
          action: 'food',
        },
        dataType: 'jsonp',
        jsonp: 'callback',
        success: function (res) {
          // console.log(res);
          if (res.status.code === 1001) {
            let commodityData = res.result.wall.docs;
            // console.log(commodityData);
            commodityData.forEach((item) => {
              addElement(item);
            });
          }
        },
      });
    }
    const addElement = (commodityData) => {
      const myDiv = document.createElement('div');
      myDiv.className = 'item';
      myDiv.innerHTML = `
            <div class="item">
                    <img
                        src="${commodityData.img}"
                    />
                    <div class="bottom-describe">
                        <p class="describe">
                            ${commodityData.title}
                        </p>
                        <div class="priceContainer">
                            <b>¥26.8</b>
                            <span class="oldPrice">￥53.6</span>
                            <span class="mystar">
                                <img
                                    src="https://s18.mogucdn.com/p2/160908/upload_27g4f1ch6akie83hacb676j622b9l_32x30.png"
                                    alt=""
                                />
                                2585
                            </span>
                        </div>
                    </div>
                </div>
            `;
      document.querySelector('.itemContainer').appendChild(myDiv);
    };
    document.onscroll = function () {
      let windowHeight = document.documentElement.clientHeight; // 用户窗口的大小
      let contentHeight = document.documentElement.offsetHeight; // 页面总共的大小

      let scrollHeight = contentHeight - windowHeight; // 计算出滚动条的高度
      let scrollTop = document.documentElement.scrollTop; // 获取当前滚动条的高度

      // console.log('windowHeight:>>', windowHeight);
      // console.log('contentHeight:>>', contentHeight);
      // console.log('scrollTop:>>', scrollTop);

      if (scrollTop > scrollHeight - 10) {
        // 加载下一页数据
        // console.log('该加载数据了');
        // 添加处理函数
        page++;
        getData(page);
      }
    };
    getData();
  </script>
</html>
